import React, { Component } from 'react';
import { Carousel } from 'antd-mobile';
import Img from '../../components/Img/Img';
import NewGroup from "../goodsDetail/newGroup";
import { index_banner } from '../home/HomeCarouselBlock.less';

export default class DistributionCarousel extends Component {
    constructor(props){
        super(props)
        this.state={
            num:0
        };
        this.timer=null;
    }

    componentDidMount() {
        // simulate img loading
        this.timer=setTimeout(() => {
            // console.log(1);
            this.setState({
                num:this.state.num+1
            });
        }, 3000);
    }

    componentWillUnmount(){
        // console.log(1);
        if(this.timer!=null){
            clearTimeout(this.timer);
        }
    }

    render() {
        const { data,newGroup,latestOpenGroupList } = this.props;
        // console.log(data);
        return (<div style={{position:"relative"}}>
            {newGroup&&latestOpenGroupList[0]?<NewGroup cl={0} newGroupList={latestOpenGroupList}></NewGroup>:""}
                <Carousel
                    //key={this.state.num}
                    className={index_banner}
                    selectedIndex={this.state.num}
                    autoplay={data.length != 1}
                    // autoplay={true}
                    infinite
                    dots
                    // resetAutoplay={true}
                >
                    {
                        data.map((item, index) => (
                            <div key={`carousel-${index}`}>
                                <a href={item.advUrl}>
                                    <Img
                                        load={
                                            ()=>{
                                                window.dispatchEvent(new Event('resize'));
                                            }
                                        }
                                        src={item.resUrl}
                                    />
                                </a>
                            </div>
                        ))
                    }
                </Carousel>
            </div>
        );
    }
}
